<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-menu class="el-menu-demo end" mode="horizontal" active-text-color="#54b1ff" default-active="1">
        <el-menu-item index="1" style="font-weight:700;font-size:18px">社保报表</el-menu-item>
      </el-menu>
      <!-- 表格 -->
      <comtable :datareport="Datareport" />
      <!-- 按钮 -->
      <div style="margin-top:20px">
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="pigeonhole">归档{{ yearMonth?yearMonth.substr(4) : '' }}月份报表</el-button>
          <el-button size="small" type="primary" style="margin:0 10px 0 20px" @click="construction">新建报表</el-button>
          <el-button size="small" type="info" style="color:#666666">取消</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import comtable from './components/componemt_table'
import { getDatareport, setpigeonhole, setnewReport } from '@/api/social'
export default {
  components: {
    comtable
  },
  data() {
    return {
      Datareport: [], // 报表数据
      yearMonth: this.$route.params.yearMonth
    }
  },
  created() {
    this.getDatareport()
  },
  methods: {
    // 获取列表数据
    async getDatareport() {
      // 页面一加载获取数据渲染表格 yearMonth
    //   console.log(this.$route)
    //   const yearMonth = this.$route.params.yearMonth
      const res = await getDatareport({ yearMonth: this.yearMonth, opType: 1 })
      this.Datareport = [...res]
    },
    // 归档报表
    async pigeonhole() {
      // 显示弹框
      await this.$confirm(`您确定要归档${this.yearMonth}报表？报表归档将覆盖上一次归档记录，无法恢复。`, '提示', { type: 'warning', center: true })
      // 发请求
      await setpigeonhole({ yearMonth: this.yearMonth })
      //   console.log(this.$route)
      // 提示用户
      this.$message.success('操作成功')
    },
    // 新建报表
    async construction() {
      const yearval = this.getNextMonth()
      const year = yearval.substring(0, 4)
      const month = yearval.substring(4)
      // 显示弹框
      await this.$confirm('您将创建 《 ' + year + '年' + month + '月 》 报表', '提示', { type: 'warning', center: true })
      this.yearMonth = yearval
      // 发请求
      await setnewReport({ yearMonth: this.yearMonth })
      // 提示用户
      this.$message.success('操作成功')
      // 从新渲染数据
      this.getDatareport()
    },
    getNextMonth() {
      const year = this.yearMonth.substring(0, 4)
      const month = this.yearMonth.slice(4)
      //   console.log(year, month)

      let year2 = year
      let month2 = parseInt(month) + 1
      if (month2 === 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }
      if (month2 < 10) {
        month2 = '0' + month2
      }
      const t2 = year2 + month2
      return t2
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .end{
    position: relative;

    .ends{
    position: absolute;
    top: 0px;
    right: 0px;
}
}
</style>
